<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id="input">
</body>
<script>
    let input = document.getElementById('input')
    function debounce(fn, t = 500) {
        let timer = null
        return function (...arg) {
            clearTimeout(timer);
            timer = setTimeout(v => {
                fn.apply(this, arg)
            }, t)
        }
    }
    input.oninput = debounce(function (e) {
        console.log(e.target.value);
    }, 500)







    // let timer = null
    // input.oninput = function (e) {
    //     // console.log(e.target.value);


    //     //ajax 极大的浪费
    //     clearTimeout(timer);  //已经存在的定时器 先清了

    //     //重新计时
    //     timer = setTimeout(v => {
    //         console.log(e.target.value);
    //     }, 500)
    // }



    function debounce(fn, t = 500) {
        let timer = null
        return function (...arg) {
            clearTimeout(timer);
            timer = setTimeout(v => {
                fn.apply(this, arg)
            }, t)
        }
    }

</script>

</html>